<!--
 * @Description:
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-23 11:49:20
 * @LastEditors: ljz
 * @LastEditTime: 2022-08-30 16:32:35
-->
<template>
    <div class="container full-screen">
        <!-- 1左侧 -->
        <div
            v-show="!epi.open_detail"
            class="left flexcbh position-re pro-bgcolor544 p-20"
        >
            <pro-title label="未检测名单"></pro-title>

            <div
                class="left-content fx1 flexcsh"
                v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0.3)"
            >
                <div class="search_box s_box m-b10">
                    <el-input
                        v-model="epi.queryForm.name"
                        placeholder="请输入内容"
                    ></el-input>
                    <div class="search_btn flexrcc" @click="searchCompany">
                        <span class="txt">搜 索</span>
                    </div>
                    <div class="reset_btn flexrcc" @click="searchCompany(2)">
                        <span class="txt">重 置</span>
                    </div>
                </div>
                <div class="grade_box m-b10">
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm.level == 1 ? 'active' : ''"
                        @click="searchCompany(11)"
                    >
                        <span class="txt">全部</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm.level == 2 ? 'active' : ''"
                        @click="searchCompany(22)"
                    >
                        <span class="txt">密接人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm.level == 3 ? 'active' : ''"
                        @click="searchCompany(33)"
                    >
                        <span class="txt">三出人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm.level == 4 ? 'active' : ''"
                        @click="searchCompany(44)"
                    >
                        <span class="txt">七类人员</span>
                    </div>
                </div>

                <div class="fx1 hidden">
                    <StaticTable
                        :columns="epi.columns1"
                        :data-list="epi.data"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(0, 0, 0, 0)"
                        :show_head="true"
                        rowHeight="40"
                    >
                        <template v-slot:title="scope">
                            <div class="title_box">{{ scope.row.title }}</div>
                        </template>

                        <template v-slot:col3="scope">
                            <el-progress
                                class="process_line"
                                :percentage="scope.row.col3"
                                :show-text="true"
                                :text-inside="false"
                                style="
                                    height: 100%;
                                    align-items: center;
                                    display: flex;
                                "
                                :stroke-width="9"
                            ></el-progress>
                        </template>
                    </StaticTable>
                </div>
                <!-- 分页 -->
                <ProPage
                    :pages="epi.pages"
                    :total="epi.total"
                    ref="ref_page1"
                    @on_page="changePage($event, 28)"
                ></ProPage>
            </div>
        </div>

        <!-- 2 中间 -->

        <!-- 3 右侧 -->
        <div
            v-show="!epi.open_detail"
            class="right flexcbh position-re pro-bgcolor544 p-20"
        >
            <pro-title label="重点人员"></pro-title>

            <div
                class="right-content fx1 flexcsh"
                v-loading="loading2"
                element-loading-background="rgba(0, 0, 0, 0.3)"
            >
                <div class="search_box s_box m-b10">
                    <el-input
                        v-model="epi.queryForm2.name"
                        placeholder="请输入内容"
                    ></el-input>
                    <div class="search_btn flexrcc" @click="searchFoces">
                        <span class="txt">搜 索</span>
                    </div>
                    <div class="reset_btn flexrcc" @click="searchFoces(2)">
                        <span class="txt">重 置</span>
                    </div>
                </div>
                <div class="grade_box m-b10">
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 1 ? 'active' : ''"
                        @click="searchFoces(1)"
                    >
                        <span class="txt">全部</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 2 ? 'active' : ''"
                        @click="searchFoces(2)"
                    >
                        <span class="txt">密接人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 3 ? 'active' : ''"
                        @click="searchFoces(3)"
                    >
                        <span class="txt">三出人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="epi.queryForm2.level == 4 ? 'active' : ''"
                        @click="searchFoces(4)"
                    >
                        <span class="txt">七类人员</span>
                    </div>
                </div>

                <div class="fx1 hidden">
                    <StaticTable
                        :columns="epi.columns2"
                        :data-list="epi.data2"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(22, 159, 196, 0.25)"
                        @onClick="onClick"
                        @onRow="onRow2"
                        headHeight="36"
                        rowHeight="40"
                    >
                    </StaticTable>
                </div>
                <!-- 分页 -->
                <ProPage
                    :pages="epi.pages2"
                    :total="epi.total2"
                    ref="ref_page2"
                    @on_page="changePage1($event, 28)"
                ></ProPage>
            </div>
        </div>

        <!-- 4弹窗列表 -->
        <div class="dialog_box flexrcc" v-if="open_detail">
            <ListDetail :title="epi.detail_title" @close_info="onCloseInfo">
                <div class="full-screen flexcbh">
                    <div class="p-row30">
                        <EpiContentNav
                            :list="enterprise.detail_btn"
                            @change="changeContent"
                        ></EpiContentNav>
                    </div>

                    <div
                        v-if="enterprise.cut_content == 1"
                        class="dialog_content1 flexcsc fx1"
                    >
                        <div class="item top m-b20">
                            <div class="flex m-b10">
                                <div class="label">姓名：</div>
                                <div class="label">{{ peopleDetail.name }}</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">性别：</div>
                                <div class="label">
                                    {{ peopleDetail.gender == 1 ? "男" : "女" }}
                                </div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">年龄：</div>
                                <div class="label">{{ peopleDetail.age }}</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">联系电话：</div>
                                <div class="label">
                                    {{ peopleDetail.mobile }}
                                </div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">身份证号：</div>
                                <div class="label">
                                    {{ peopleDetail.idCard }}
                                </div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">居住地址：</div>
                                <div class="label">{{ peopleDetail.addr }}</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">所属村镇网格：</div>
                                <div class="value">
                                    {{ peopleDetail.townsGridName }}
                                    <div class="word">
                                        （负责人：{{
                                            peopleDetail.townsGridManager
                                        }}
                                        {{
                                            peopleDetail.townsGridManagerMobile
                                        }}）
                                    </div>
                                </div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">所属行业网格：</div>
                                <div class="value">
                                    {{ peopleDetail.industryGridName }}
                                    <div class="word">
                                        （负责人：{{
                                            peopleDetail.industryGridManager
                                        }}
                                        {{
                                            peopleDetail.industryGridManagerMobile
                                        }}）
                                    </div>
                                </div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">标签：</div>
                                <div class="box">常住人口</div>
                                <div class="box">户籍人口</div>
                            </div>
                        </div>
                    </div>
                    <div
                        v-else-if="enterprise.cut_content == 2"
                        class="full-screen flexcbh fx1"
                    >
                        <div class="fx1 hidden">
                            <StaticTable
                                :columns="list_columns2"
                                :data-list="list_info"
                                headBg="rgba(22, 159, 196, 0.2)"
                                border_color="rgba(22, 159, 196, 0.25)"
                                headHeight="36"
                                @onClick="onClickDetail"
                            >
                                <template v-slot:col3="scope">
                                    <div>
                                        {{
                                            scope.row.col3 == 1
                                                ? "已检测"
                                                : "未检测"
                                        }}
                                    </div>
                                </template>
                            </StaticTable>
                        </div>
                        <!-- 分页 -->

                        <ProPage
                            :pages="perpleRecordQuery.pages"
                            :total="perpleRecordQuery.total"
                            ref="ref_page2"
                            @on_page="changePage2($event, 12)"
                        ></ProPage>
                    </div>
                </div>
            </ListDetail>
        </div>

        <!-- 地图弹出 -->
        <div v-if="map_dialog">
            <ProDialog @myclose="onMapClose"></ProDialog>
        </div>
    </div>
</template>

<script>
import ProTitle from "@/components/Pro/ProTitle";
import ProTitle2 from "@/components/Pro/ProTitle2";
import StaticTable from "@/components/Common/StaticTable.vue";
import ProShade from "./ProShade";
// import PieChart from "@/components/Chart/PieChart/PieChart.vue";
// import LineChart from "@/components/Chart/LineChart/LineChart.vue";
// import BarChart from "@/components/Chart/BarChart/BarChart.vue";
import ListDetail from "./ListDetail";
import DynamicTable from "@/components/Common/DynamicTable.vue";
import ProPage from "./ProPage";
import EpiContentNav from "./EpiContentNav";
import ProDialog from "./ProDialog";

import { my_option } from "@/utils/mock/proview/person";

import {
    listGrid,
    listKeyPersonnelUnCheckPage,
    listKeyPersonnelUser,
    keyPersonnelInfo,
    keyPersonnelRecord,
} from "@/api/epiview.js";

import {
    getCompany,
    listCompanyWork,
    // listWork,
    detailWork,
} from "@/api/proview.js";

export default {
    name: "NavGrid",
    components: {
        ProTitle,
        ProTitle2,
        DynamicTable,
        StaticTable,
        ProShade,
        // PieChart,
        // LineChart,
        // BarChart,
        ListDetail,
        ProPage,
        EpiContentNav,
        ProDialog,
    },
    props: {
        company_type: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            map_dialog: false,
            loading: false,
            loading2: false,
            compnyType: false,
            //信息-------------------------------
            epi: {
                // table_date: null,
                // 左侧菜单栏参数
                open_detail: false,
                detail_title: "企业重点人员信息",
                pages: 1,
                total: 1,
                data: [],

                columns1: my_option.columns1,
                cut_companyid: "",
                queryForm: {
                    current: 1,
                    name: "",
                    level: 1,
                    size: 10,
                    sortList: [
                        {
                            asc: false,
                            column: "",
                        },
                    ],
                    type: 0,
                },
                // 左侧菜单栏参数

                //右侧菜单栏参数
                data2: [],
                columns2: my_option.columns2,
                queryForm2: {
                    current: 1,
                    name: "",
                    level: 1,
                    size: 10,
                    sortList: [
                        {
                            asc: false,
                            column: "",
                        },
                    ],
                    type: 0,
                },
                total2: 1,
                pages2: 1,
                //右侧菜单栏参数
            },
            // 地图点的集合
            MarkerData: [],

            // 列表明细弹出层--------------------------
            open_detail: false,
            detail_title: "详情",
            list_columns2: my_option.list_columns2,
            list_info: [
                {
                    title: 1,
                    col2: "解封后第一轮筛查",
                    col3: "是",
                    col4: "/",
                    col5: "2022/8/17 23:43:38",
                    col6: "铁山港区第3采样点-兴港镇玉铁高速路卡点",
                    col7: "居民",
                    col8: "BX5300023QBH",
                    col9: "TX53006B4LCG",
                    col10: "HZA10BNHF344TF8M4",
                    col11: "铁山港区人民医院",
                    col12: "铁山港区人民医院",
                    col13: "2022-08-21 04:49:10",
                },
            ],
            // 作业详情弹出层----------------------------
            open_detail2: false,
            // detail2_title: "作业明细",
            // detail2_info: {},

            enterprise: {
                // data: [],
                // columns: my_option.columns_table,
                // cut_companyid: "",
                // queryForm: {
                //     sort_by: false, // asc (true) 正序  desc(false) 倒序
                //     industry_type: "",
                //     company_name: "",
                //     level: 1,
                // },
                // queryForm2: {
                //     company_id: "",
                //     pageSize: 13,
                //     pageNum: 1,
                //     type: 1,
                // },
                // columns2: [
                //     {
                //         label: "序号",
                //         prop: "title",
                //         width: "60",
                //     },
                //     {
                //         label: "姓名",
                //         prop: "col2",
                //     },
                //     {
                //         label: "联系电话",
                //         prop: "col3",
                //     },
                //     {
                //         label: "所属网格",
                //         prop: "col4",
                //     },
                //     {
                //         label: "轮次",
                //         prop: "col5",
                //     },
                // ],
                // data2: [
                //     // {
                //     //     title: 1,
                //     //     col2: "红花根村",
                //     //     col3: "彬池村",
                //     //     col4: 546,
                //     //     col5: 1,
                //     // },
                //     // {
                //     //     title: 2,
                //     //     col2: "红花根村",
                //     //     col3: "彬池村",
                //     //     col4: 546,
                //     //     col5: 1,
                //     // },
                //     // {
                //     //     title: 3,
                //     //     col2: "红花根村",
                //     //     col3: "彬池村",
                //     //     col4: 546,
                //     //     col5: 1,
                //     // },
                // ],
                // open_detail: false,
                // detail_title: "重点人员信息",
                // pages: 1,
                cut_content: 1,
                detail_btn: [
                    { label: "个人信息", id: 1 },
                    { label: "检测记录", id: 2 },
                ],
            },
            //重点人员详情
            peopleDetail: {
                id: "",
                name: "",
                age: "",
                mobile: "",
                idCard: "",
                gender: "",
                addr: "",
                townsGridManager: "", //	所属村镇网格负责人
                townsGridManagerMobile: "", //所属村镇网格负责人电话
                townsGridName: "", //所属村镇网格名称

                industryGridManager: "", //所属行业网格负责人
                industryGridManagerMobile: "", //所属行业网格负责人电话
                industryGridName: "", //所属行业网格名称
                label: [], //标签
            },

            //重点人员检测记录
            perpleRecord: [],
            //重点人员检测记录查询
            perpleRecordQuery: {
                current: 1,
                idCard: "",
                size: 10,
                sortList: [
                    {
                        asc: false,
                        column: "",
                    },
                ],
            },
        };
    },
    computed: {
        // 0 计算是否 跨列
        // getAcrossCol() {
        //     return (p) => {
        //         if (p == 3) return "across-col3";
        //         else if (p == 2) return "across-col2";
        //         else return "";
        //     };
        // },
    },

    watch: {},

    created() {
        this.getData2();
        this.getData3();
    },
    mounted() {},
    methods: {
        /** 关闭地图的消息弹窗(给父组件调用) */
        closeMap(id) {
            this.MarkerData.forEach((item) => {
                if (id == this.epi.cut_companyid) {
                    // 点击x号 关闭 当前消息窗口
                    item.level = 28;
                } else {
                    // 点击另外的地图标点, 关闭旧窗口, 打开新窗口时, 保留新窗口的icon高亮
                    if (item.id != this.epi.cut_companyid) {
                        item.level = 28;
                    }
                }
            });
        },
        /** 点击地图弹窗详情(给父组件调用) */
        detailMap(id) {
            this.epi.open_detail = true;
            this.open_detail = false;
            // this.epi.cut_companyid = id;
        },

        /** 点击企业列表 的某列 */
        onClick(row, col) {},
        //
        onClickDetail(row, col) {
            console.log(11);
        },
        /** 关闭列表明细 */
        onCloseInfo() {
            this.open_detail = false;
        },
        /** 关闭详情 */
        onCloseDetail() {
            this.open_detail2 = false;
        },
        /** 重置弹窗数据 */
        reset() {
            this.epi.open_detail = false;
            this.$refs["ref_detail"].reset();
        },
        /** 左侧列表分页切换 */
        changePage(num, type) {
            if (type == 28) {
                this.epi.queryForm.current = num;
                this.getData3();
            }
        },
        /** 右侧列表分页切换 */
        changePage1(num, type) {
            if (type == 28) {
                this.epi.queryForm2.current = num;
                this.getData2();
            }
        },

        /** 右侧列表详情检测记录分页切换 */
        changePage2(num, type) {
            if (type == 12) {
                this.perpleRecordQuery.current = num;
                this.keyPersonnelRecord();
            }
        },

        /** 搜索 */
        searchCompany(type = 1) {
            this.epi.queryForm.level = 1;
            if (this.$refs["ref_page1"]) this.$refs["ref_page1"].resetPage();
            if (type == 2) {
                this.epi.queryForm.name = "";
            } else if (type == 11) {
                this.epi.queryForm.level = 1;
                this.epi.queryForm.type = 0;
            } else if (type == 22) {
                this.epi.queryForm.level = 2;
                this.epi.queryForm.type = 1;
            } else if (type == 33) {
                this.epi.queryForm.level = 3;
                this.epi.queryForm.type = 2;
            } else if (type == 44) {
                this.epi.queryForm.level = 4;
                this.epi.queryForm.type = 3;
            }
            this.getData3();
        },
        /** 搜索 */
        searchFoces(type = 1) {
            this.epi.queryForm2.current = 1;
            if (this.$refs["ref_page2"]) this.$refs["ref_page2"].resetPage();
            if (type == 2) {
                this.epi.queryForm2.name = "";
            } else if (type == 1) {
                this.epi.queryForm2.level = 1;
                this.epi.queryForm2.type = 0;
            } else if (type == 2) {
                this.epi.queryForm2.level = 2;
                this.epi.queryForm2.type = 1;
            } else if (type == 3) {
                this.epi.queryForm2.level = 3;
                this.epi.queryForm2.type = 2;
            } else if (type == 4) {
                this.epi.queryForm2.level = 4;
                this.epi.queryForm2.type = 3;
            }
            this.getData2();
        },

        /** 弹窗列表数据 */
        // listWork() {
        //     listWork(this.epi.queryForm2).then((res) => {
        //         if (res.code == 0) {
        //             this.epi.pages = res.data.pages;
        //             this.list_info = res.data.data.map((item) => {
        //                 return {
        //                     id: item.id,
        //                     title: item.work_start_time,
        //                     col2: item.work_end_time,
        //                     col3: item.work_name,
        //                     col4: item.type,
        //                     col5: item.header,
        //                     col6: item.result,
        //                     col7: "详情",
        //                 };
        //             });
        //         }
        //     });
        // },
        /** 弹窗详情数据 */
        detailWork(id) {
            this.keyPersonnelInfo(id);
            this.keyPersonnelRecord();
        },

        //重点人员详情-个人信息
        keyPersonnelInfo(id) {
            keyPersonnelInfo({ id: id }).then((res) => {
                if (res.code == 0) {
                    let data = res.data;

                    this.peopleDetail.id = data.id;
                    this.peopleDetail.name = data.name;
                    this.peopleDetail.age = data.age;
                    this.peopleDetail.mobile = data.mobile;

                    this.peopleDetail.idCard = data.idCard; //身份证
                    this.peopleDetail.gender = data.gender;
                    this.peopleDetail.addr = data.addr;

                    this.peopleDetail.townsGridManager = data.townsGridManager; //所属村镇网格负责人
                    this.peopleDetail.townsGridManagerMobile =
                        data.townsGridManagerMobile; //所属村镇网格负责人电话
                    this.peopleDetail.townsGridName = data.townsGridName; //所属村镇网格名称

                    this.peopleDetail.industryGridManager =
                        data.industryGridManager; //所属行业网格负责人
                    this.peopleDetail.industryGridManagerMobile =
                        data.industryGridManagerMobile; //所属行业网格负责人电话
                    this.peopleDetail.industryGridName = data.industryGridName; //所属行业网格名称
                    this.peopleDetail.label = data.label;
                }
            });
        },

        //重点人员详情-检测记录
        keyPersonnelRecord() {
            keyPersonnelRecord(this.perpleRecordQuery).then((res) => {
                if (res.code == 0) {
                    this.perpleRecordQuery.total = res.data.total;
                    this.perpleRecordQuery.pages = Math.ceil(
                        parseInt(res.data.total) / parseInt(res.data.size)
                    );
                    //list_info
                    this.list_info = res.data.records.map((item, index) => {
                        return {
                            title: index + 1,
                            col2: item.title,
                            col3: item.isTest,
                            col4: item.reason,
                            col5: item.acquisitionTime,
                            col6: item.collectOrganizationName,

                            col7: item.examinedPersonClassify,
                            col8: item.boxNumber,
                            col9: item.tubeNumber,
                            col10: item.nucleicAcidCode,
                            col11: item.transferOrganization,
                            col12: item.detectionOrganization,
                            col13: item.testTime, //检测时间
                        };
                    });
                }
            });
        },

        /** 左侧列表数据 */
        getData3() {
            this.loading = true;
            let temp = {
                current: this.epi.queryForm.current,
                size: this.epi.queryForm.size,
                // level: this.epi.queryForm.level,
                name: this.epi.queryForm.name,
                type: this.epi.queryForm.type,
            };
            listKeyPersonnelUnCheckPage(temp).then((res) => {
                console.log(res.data.total);
                if (res.code == 0) {
                    this.epi.total = res.data.total;
                    this.epi.pages = Math.ceil(
                        parseInt(res.data.total) / parseInt(res.data.size)
                    );
                    //{ title: 1, col2: "李四",col3: "13356562224",col4: "XXXWH网格", col5: '第二轮' }
                    this.epi.data = res.data.records.map((item, index) => {
                        return {
                            id: index + 1,
                            title: index + 1,
                            col2: item.name,
                            col3: item.mobile,
                            col4: item.gridName,
                            col5: item.title,
                        };
                    });
                } else {
                    this.epi.data = [];
                }
                this.loading = false;
            });
        },
        /** 右侧列表数据 */
        getData2() {
            this.loading2 = true;
            let temp = {
                current: this.epi.queryForm2.current,
                size: this.epi.queryForm2.size,
                name: this.epi.queryForm2.name,
                type: this.epi.queryForm2.type,
            };
            listKeyPersonnelUser(temp).then((res) => {
                if (res.code == 0) {
                    console.log(res.data.total);
                    // console.log(res.data);
                    this.epi.total2 = res.data.total;
                    this.epi.pages2 = Math.ceil(
                        parseInt(res.data.total) / parseInt(res.data.size)
                    );

                    this.epi.data2 = res.data.records.map((item, index) => {
                        return {
                            id: item.id,
                            title: index + 1,
                            col2: item.name,
                            col3: item.mobile,
                            col4: item.townsGridName,
                            col5: item.industryGridName,
                            idCard: item.idCard,
                        };
                    });
                } else {
                    this.epi.data2 = [];
                }
                this.loading2 = false;
            });
        },
        /** 点击地图标点emit=false  点击table弹出简介信息时emit=true */
        getIntroduction(id, emit = false) {
            this.epi.cut_companyid = id;
            getCompany(id).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    this.epi.detail_title = data.company_name;

                    let temp = [
                        {
                            label: "名称",
                            value: data.company_name,
                        },
                        {
                            label: "行业类型",
                            value: this.getIndustry(data.industry_type),
                            is_industry: true,
                        },
                        {
                            label: "法定代表人",
                            value: data.legal_name,
                        },
                        {
                            label: "法人电话",
                            value: data.legal_phone,
                            is_tel: false,
                        },
                        {
                            label: "查看详情",
                            value: "",
                            is_detail: true,
                            is_video: false,
                        },
                    ];
                }
            });
        },

        //右侧列表详情
        onRow2(row) {
            // console.log("111", row);
            this.enterprise.cut_content = 1;
            this.perpleRecordQuery.idCard = row.idCard;
            this.open_detail = true;
            this.detailWork(row.id);
        },
        changeContent(id) {
            this.enterprise.cut_content = id;
        },
        /** 点击地图覆盖物emit=false  点击table弹出简介信息时emit=true */
        getIntroduction2(obj, emit = false) {
            this.map_dialog = true;
        },
        onMapClose() {
            this.map_dialog = false;
        },
    },
};
</script>

<style lang="scss">
.el-image-viewer__wrapper {
    top: vh(100);
    bottom: vh(100);
    left: vh(200);
    right: vh(200);
}

.el-loading-spinner .circular .path {
    stroke: #2ef7fc !important;
}

.el-progress__text {
    color: #fff;
    margin-left: vw(24);
}
.el-progress-bar__inner {
    border-radius: vw(1);
    background: linear-gradient(90deg, #0f699c 0%, #49d4ff 100%);
}
</style>

<style lang="scss" scoped>
.container {
    ::v-deep .el-input__inner {
        color: white;
    }
    ::v-deep .el-input--medium .el-input__inner {
        background-color: #002440;
        border: 1px solid #094666;
    }
    .process_line {
        width: vw(200);
        ::v-deep .el-progress-bar__outer {
            border-radius: 0;
            background-color: rgba(255, 255, 255, 0.1);
        }
    }

    .left {
        position: absolute;
        z-index: 12;
        left: vw(30);
        top: vh(88);
        bottom: vh(40);
        width: vw(520);
        .grade_box {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            .sort_btn {
                cursor: pointer;
                padding: 0px 10px;
                height: vh(32);
                background: #002440; // 16171F
                border: 1px solid rgba(22, 159, 196, 0.25);
                .txt {
                    font-size: 14px;
                    color: white;
                }
                &.active {
                    background: rgba(22, 159, 196, 0.2);
                    .txt {
                        color: #61ffff;
                    }
                }
            }
        }
        .sort_box {
            .sort_btn {
                cursor: pointer;
                padding: 0px 10px;
                height: vh(32);
                background: #002440; // 16171F
                border: 1px solid rgba(22, 159, 196, 0.25);
                .txt {
                    font-size: 14px;
                    color: white;
                }
                &.active {
                    background: rgba(22, 159, 196, 0.2);
                    .txt {
                        color: #61ffff;
                    }
                }
            }
        }
        .title_box {
            padding: 0 vw(8);
            min-width: vw(24);
            text-align: center;
            background: rgba(22, 159, 196, 0.2);
            border: 1px solid rgba(45, 205, 255, 0.24);
            border-radius: 2px;
            color: #2dcdff;
        }
    }

    .right {
        position: absolute;
        z-index: 12;
        right: vw(30);
        top: vh(88);
        bottom: vh(40);
        width: vw(640);
        .right-content {
            .grade_box {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                .sort_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: vh(32);
                    background: #002440; // 16171F
                    border: 1px solid rgba(22, 159, 196, 0.25);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                    &.active {
                        background: rgba(22, 159, 196, 0.2);
                        .txt {
                            color: #61ffff;
                        }
                    }
                }
            }
        }
    }

    .iconfont {
        margin-right: vw(5);
    }

    // 弹出层
    .dialog_box {
        position: absolute;
        z-index: 15;
        left: 0;
        top: vh(56);
        height: calc(100% - vh(56));
        width: 100%;
        background: rgba(0, 6, 17, 0.5);
        backdrop-filter: blur(20px);

        .dialog_content1 {
            .item {
                width: vw(480);
                background: rgba(22, 159, 196, 0.2);
                border: 1px solid rgba(22, 159, 196, 0.25);
                padding: vh(24) vw(20);

                .label {
                    color: #fff;
                    margin-right: vw(10);
                }
                .value {
                    color: #2ef7fc;
                }

                .word {
                    color: #fff;
                    display: inline-block;
                }

                .box {
                    width: vw(72);
                    height: vw(24);
                    background: rgba(45, 255, 205, 0.16);
                    border: 1px solid rgba(45, 255, 205, 0.32);
                    border-radius: 2px;
                    color: #2dffcd;
                    font-size: vw(12);
                    text-align: center;
                    padding: vw(3) 0 0 0;
                    margin-left: vw(16);
                }
            }
        }
    }

    // .scroll {
    //     width: vw(1500);
    //     overflow-x: auto;
    //     overflow-y: hidden;
    // }
}
</style>
